<template>
  <div>
    <!-- 119专用 -->
    <Modal
      v-model="zlNShow"
      :footer-hide="true"
      :mask-closable="false"
      width="720"
      @on-visible-change="vJchange"
      class-name="vertical-center-modal"
    >
      <div class="f_24 c333 marginB20">
        专利缴费
      </div>
      <div class="marginB10">
        <Row :gutter="15" class="f_14">
          <Col :span="5" class="textRight c999 lineH34">
          <span class="cRed">*</span>
            专利号：
          </Col>
          <Col :span="15">
            <Input 
              search enter-button
              class="tempFW marginB10"
              @on-search="xtwC"
              :placeholder="'请输入专利号'" size="large"  v-model="patent_number" ref="patent_number" 
              :disabled="jinY"/>
            <div class="c999">
              如需下单当天立即缴费的请先联系客服确认
            </div>
          </Col>
        </Row>
        
      </div>
      <div v-show="showBox1" class="textCenter cCCC f_18 padding20">
        正在更新专利库，请等10秒钟。
      </div>
      <div v-show="showBox2">
        <div  class="textCenter cCCC f_16 padding20" v-show="!$app.judgeData(data1)">
          {{tips}}
        </div>
        <div v-show="$app.judgeData(data1)">
          <div class="htow marginB10 paddingLi" :style="'max-height:'+($app.winHeight-250)+'px;'">
            <Table :data="data1" :columns="columns1" size="small" stripe border
              @on-selection-change="onSelect"
            ></Table>
          </div>
          <div class="textRight">
            <div class="f_20 pullLeft relative" style="top:-5px;">
              价格：¥
              <span class="cRed f_26 f_bold" >{{$app.accAdd(zjT,zjV)}}</span>
              <span class="f_14 marginB15">
                （ 官费：¥ <span class="cRed f_16 f_bold">{{zjT}}</span> + 服务费：¥ <span class="cRed f_16 f_bold">{{zjV}}</span> ）
              </span>
            </div>
            <Button type="primary" @click="goFunXx">提 交</Button>
          </div>
        </div>
        
      </div>

      
    </Modal>
    
  </div>
</template>
<style lang="less" scoped>
  @import './css/temp.less';
  .htow {
    clear: both;
    margin:0 -16px;
    overflow-y: auto;
    .contw{
      position:absolute;
      right:-3px;
      top:0;
      cursor: pointer;

    }
    td.goOnTxt{height:30px;}
  }
</style>

<script>
export default {
  name:'temp119',
  components: {},
  data() {
    let data = {
      patent_number:'',//专利号
      data1: [],
      columns1: [],
      selectMore: [], //多选，选中的栏位
      tips:'暂无数据'//提示数据
    };
    let tool={
      zlNShow:false,//弹框是否显示
      
      //请求结果框
      showBox1:false,
      showBox2:false,
      jinY:false,//输入框禁用

      timeDown:null,//定时请求器
    };
    return Object.assign(data, tool);
  },
  created() {
  },
  watch:{},

  methods: {
    // 多选模式触发
    onSelect(list, row) {
      let selectMore = [];
      list.forEach((val, i) => {
        selectMore.push(val);
      });
      this.selectMore = selectMore;
    },
    uywY119(num,buEr){
      this.zlNShow=true;//显示弹框119
      this.patent_number=num;
      
      // 自动查询
      if(buEr){
        this.xtwC();
      } 
    },
    vJchange(buEr){
      if(buEr){//显示弹框

      }else{//关闭弹框
        //清空定时器
        this.initTime();
        // 万物初始
        setTimeout(() => {

          this.patent_number='';//专利号
          this.data1= [];
          this.columns1= [];
          this.selectMore= []; //多选，选中的栏位

          this.tips='';//提示数据
          this.zlNShow=false;//弹框是否显示
          
          //请求结果框
          this.showBox1=false;
          this.showBox2=false;
          this.jinY=false;//输入框禁用

        }, 200);
      }
    },

    //搜索该专利下，可以续费的类表
    xtwC(){
      
      let {
        patent_number
      }=this;
      let that=this;

      if($app.judgeData($app.delSpace(patent_number))){
        let {
          timeDown
        }=that;
        
        if($app.judgeData(timeDown)){
          clearInterval(timeDown);//清空定时器
          that.timeDown=null;
        }

        $ajax.z_sXxput_no(patent_number,()=>{
          this.jinY=true;
          this.showBox1=true;
          this.showBox2=false;
          
          //开始定时请求器 3秒钟请求一次
          let time = 4;//4x3 请求12秒


          //设置定时器 每1秒钟 执行一次
          let timeDown = setInterval(() => {
            $ajax.z_sXxput_Sx(patent_number,buEr=>{
              console.log('剩余 = ',time)
              //time自身减1
              time--;

              if(buEr==true){//更新成功
                console.log('更新成功');

                this.initTime();//初始化定时器
                this.z_sXxput_List();
              }else if(time <= 0){//清空定时器

                this.initTime();//初始化定时器
                this.z_sXxput_List();
              }else{
                console.log('继续等 == ')
              }
              
            });
            
          }, 3000);

          that.timeDown=timeDown;//定时器赋值给全局
         

        });
      }else{
        this.$Message.error({content:'请输入专利号'});
        this.$refs['patent_number'].focus();
        this.patent_number='';
      }
    },
    //初始化定时器
    initTime(){
      let that=this;
      let {timeDown}=that;

      console.log('-----------进入清空定时器-----------');
      clearInterval(timeDown);//清空定时器
      that.timeDown=null;
      console.log('-----------清空完毕-----------');

      this.jinY=false;
    },
    //获取 缴费列表
    z_sXxput_List(){
      let {
        patent_number
      }=this;

      this.tips='请求中...';

      this.showBox1=false;
      this.showBox2=true;
      this.jinY=false;


      //初始化数据
      this.data1=[];
      this.columns1=[];
      this.selectMore= []; //多选，选中的栏位

      $ajax.z_sXxput_List(patent_number,resData=>{
        this.tips='暂无数据';

        let keys=Object.keys(resData);
        let values=Object.values(resData);
        let arr=[];

        values.forEach((val,i)=>{
          // val.unshift(keys[i])
          let obj={};
          obj['year']=(keys[i].replace(/year\_|first\_/g,''));
          obj['list']=JSON.stringify(values[i]);

          let moneyA=0;//官费
          let idArr=[];
          (values[i]).forEach((jar,r)=>{
            moneyA=$app.accAdd(moneyA, parseInt(jar.fee))
            idArr.push(jar.id)
          });
          obj['moneyA']=moneyA;//官费
          let moneyB=this.worn(moneyA);//服务费
          obj['moneyB']=moneyB;//服务费
          obj['moneyC']=$app.accAdd(moneyA,moneyB);//总价
          obj['idArr']=idArr;//下单的时候的ID

          arr.push(obj)
        });
        this.data1=arr;

        this.columns1=[
          {
            title: " ",
            type: "index",
            width: 30,
            align: "center ",
            className: "goOnTxt c999"
          },
          {
            type: "selection",
            className: "goOnTxt",
            align: "center",
            width: 40
          },
          {
            title: "年份",
            width:50,
            align:'center',
            className:'goOnTxt',
            render: (h, params) => {
              let {
                row:{
                  year,
                }
              } = params;

              return h("div", { class: " " }, `${year}`);
            }
          },
          {
            title: "费用种类",
            className:'goOnTxt',
            render: (h, params) => {

              let {
                row:{
                  list
                }
              } = params;
              let listM=JSON.parse(list);

              let out=[];
              listM.forEach((val,i)=>{
                out.push(
                  h(
                    "div",{ class: "quanZr " },`${val.fee_type}`
                  )
                );
              });

              return h("div",out);
            }
          },
          {
            title: "应缴金额",
            className:'goOnTxt',
            width:100,
            render: (h, params) => {

              let {
                row:{
                  list
                }
              } = params;
              let listM=JSON.parse(list);

              let out=[];
              listM.forEach((val,i)=>{
                out.push(
                  h(
                    "div",{ class: "quanZr " },`${parseFloat(val.fee)}`
                  )
                );
              });

              return h("div",out);
            }
          },
          {
            title: "缴费截止日",
            className:'goOnTxt',
            width:100,
            render: (h, params) => {

              let {
                row:{
                  list
                }
              } = params;
              let listM=JSON.parse(list);

              let out=[];
              listM.forEach((val,i)=>{
                out.push(
                  h(
                    "div",{ class: "quanZr " },`${val.limit_date}`
                  )
                );
              });

              return h("div",out);
            }
          },


          
        ];
      },res=>{
        this.tips='暂无数据';
      });
    },
    //服务费计算
    worn(num){
      let out=0;
      let {patent_pay_fee}=$app.getSession('bigSetting');

      if(num<1500){
        out=patent_pay_fee[0].service_fee;
      }else if(1500<=num && num<3000){
        out=patent_pay_fee[1].service_fee;
      }else if(3000<=num && num<5000){
        out=patent_pay_fee[2].service_fee;
      }else if(5000<=num && num<8000){
        out=patent_pay_fee[3].service_fee;
      }else if(8000<=num){
        out=patent_pay_fee[4].service_fee;
      }

      return out;
    },

    goFunXx(){
      let {
        selectMore
      }=this;
      if($app.judgeData(selectMore)){
        console.log('selectMore = ',selectMore[0].year,this.data1[0].year)
        // if(selectMore[0].year)

        if(selectMore[0].year!=this.data1[0].year){
          $app.alert('专利缴费请按照年份顺序');
        }else{
          let judK=false;
          let sXu=0;//上一个数字
          selectMore.forEach((val,i)=>{
            
            if(i>0 && (val.year-sXu)>1){
              judK=true;
            }

            sXu=val.year;//现在值，赋值给上一个数
          });

          if(!!judK){
            $app.alert('请按照年份顺序缴费');
          }else{

            let idArr=[];
            selectMore.forEach((val,i)=>{
              idArr=[...idArr,...val.idArr]
            })
            let patent_fee_ids=JSON.stringify(idArr);

            $ajax.z_sXxput_payG(patent_fee_ids,({order_id})=>{

              // 调起父级的支付框
              this.$emit('payBoxGo',order_id,null,true);
            });
          }
        }
      }else{
        $app.alert('请选择需缴费的专利');
      }
    },
  },
  mounted() {
    //
  },
  computed:{
    zjT(){
      let out=0;
      let {
        selectMore
      }=this;
      selectMore.forEach((val,i)=>{
        out=$app.accAdd(out,val.moneyA);//官费
      });
      return out;
    },
    zjV(){
      let out=0;
      let {
        selectMore
      }=this;
      selectMore.forEach((val,i)=>{
        out=$app.accAdd(out,val.moneyB);//服务费
      });
      return out;
    }
  }
};
</script>

